<template>
  <div>
    <div class="header">
      <ul class="header-left">
        logo
      </ul>
      <div class="header-right">
        <img src="../assets/alarm.png" class="img1" />
        <el-popover placement="bottom" trigger="click">
          <img src="../assets/avatar.png" alt="" />
          <p>李备</p>
          <p>3421583006</p>
          <button
            style="
              margin: 0 5px;
              border: none;
              background: #3f3363;
              color: #fff;
            "
          >
            个人资料
          </button>
          <button style="background: #00af35; border: none; color: #fff">
            实名资料
          </button>
          <el-button class="img2" slot="reference"
            ><img class="img3" src="../assets/avatar.png" alt="" />
          </el-button>
        </el-popover>
      </div>
    </div>
    <el-tabs
      :tab-position="tabPosition"
      style="width: 1400px; margin-left: 200px; height: 90vh"
    >
      <el-tab-pane label="个人中心">
        <div class="Personal">
          <img :src=" 'http://192.168.0.28:8082'+geren.avatar" alt="" />
          <p>账号</p>
          <input v-model="geren.username" type="text" />
          <p>手机号码</p>
          <input v-model="geren.mobile" type="text" />
          <p>邮箱</p>
          <input v-model="geren.email" type="text" />
          <p>实名认证</p>
          <input type="text" />
          <br />
          <button @click="outs">退出登录</button>
          <button>注册账号</button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="企业认证">
        <el-row :gutter="15">
          <el-form
            ref="elForm"
            :model="formData"
            :rules="rules"
            size="medium"
            disabled="false"
            label-width="100px"
          >
            <el-col :span="12">
              <el-form-item
                label-width="140px"
                label="机构类型"
                prop="field126"
              >
                <el-input
                  v-model="formData.enterprise_nature"
                  placeholder="请输入机构类型"
                  clearable
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label-width="140px"
                label="联系人"
                prop="field127"
              >
                <el-input
                  v-model="formData.corporate_information"
                  placeholder="请输入法人姓名"
                  clearable
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
            </el-col>
                <el-col :span="12">
              <el-form-item
                label-width="140px"
                label="统一社会信用代码"
                prop="field127"
              >
                <el-input
                  v-model="formData.unify_social_credit_code"
                  placeholder="请输入法人姓名"
                  clearable
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label-width="140px"
                label="公司名称"
                prop="field128"
              >
                <el-input
                  v-model="formData.company_name"
                  placeholder="请输入机构名称"
                  clearable
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label-width="140px"
                label="联系方式"
                prop="field129"
              >
                <el-input
                  v-model="formData.corporate_phone"
                  placeholder="请输入法人联系方式"
                  clearable
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label-width="140px"
                label="开户行"
                prop="field130"
              >
                <el-input
                  v-model="formData.account_bank"
                  placeholder="请输入证件类型"
                  clearable
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label-width="140px"
                label="法人身份证号"
                prop="field131"
              >
                <el-input
                  v-model="formData.corporate_id_number"
                  placeholder="请输入法人身份证号"
                  clearable
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label-width="140px"
                label="机构证件照片"
                prop="field132"
                required
              >
                <el-upload
                  ref="field132"
                  :file-list="field132fileList"
                  :action="field132Action"
                  :before-upload="field132BeforeUpload"
                >
                  <el-button size="small" type="primary" icon="el-icon-upload"
                    >点击上传</el-button
                  >
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label-width="140px"
                label="法人身份证照片"
                prop="field133"
                required
              >
                <el-upload
                  ref="field133"
                  :file-list="field133fileList"
                  :action="field133Action"
                  :before-upload="field133BeforeUpload"
                >
                  <el-button size="small" type="primary" icon="el-icon-upload"
                    >点击上传</el-button
                  >
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label-width="140px"
                label="基本账号"
                prop="field134"
              >
                <el-input
                  v-model="formData.basic_account"
                  placeholder="请输入机构证件号"
                  clearable
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label-width="140px"
                label="法人授权书"
                prop="field135"
                required
              >
                <el-upload
                  ref="field135"
                  :file-list="field135fileList"
                  :action="field135Action"
                  :before-upload="field135BeforeUpload"
                >
                  <el-button size="small" type="primary" icon="el-icon-upload"
                    >点击上传</el-button
                  >
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label-width="140px"
                label="营业执照"
                prop="field136"
                required
              >
                <el-upload
                  ref="field136"
                  :file-list="field136fileList"
                  :action="field136Action"
                  :before-upload="field136BeforeUpload"
                >
                  <el-button size="small" type="primary" icon="el-icon-upload"
                    >点击上传</el-button
                  >
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label-width="140px"
                label="联系地址"
                prop="field138"
              >
                <el-input
                  v-model="formData.contact_address"
                  placeholder="请输入详细地址"
                  clearable
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label-width="140px"
                label="账号名称"
                prop="field137"
              >
                <el-input
                  v-model="formData.account_name"
                  placeholder="请输入企业电话"
                  clearable
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="公章使用记录">
        <el-table :data="seallist" style="width: 100%">
          <el-table-column prop="id" label="序号" >
          </el-table-column>
          <el-table-column prop="name" label="公章名称" >
          </el-table-column>
          <el-table-column prop="guarantee_company_name" label="所属公司"> </el-table-column>
          <!-- <el-table-column prop="remark" label="使用时间" width="180">
          </el-table-column> -->
          <el-table-column prop="remark" label="使用文件名称" >
          </el-table-column>
          <!-- <el-table-column prop="address" label="使用人"> </el-table-column> -->
          <!-- <el-table-column prop="date" label="备注" width="180">
          </el-table-column> -->
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="法人章使用记录">
        <el-table :data="corporatelist" style="width: 100%">
          <el-table-column prop="id" label="序号">
          </el-table-column>
          <el-table-column prop="name" label="法人章名称">
          </el-table-column>
          <el-table-column prop="guarantee_company_name" label="所属公司"> </el-table-column>
          <!-- <el-table-column prop="date" label="使用时间" width="180">
          </el-table-column> -->
          <el-table-column prop="remark" label="使用文件名称" >
          </el-table-column>
          <!-- <el-table-column prop="username" label="使用人"> </el-table-column> -->
          <!-- <el-table-column prop="date" label="备注" width="180">
          </el-table-column> -->
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="企业业绩">
        <el-table
          :data="
            yejilist.filter(
              (data) =>
                !search ||
                data.name.toLowerCase().includes(search.toLowerCase())
            )
          "
          style="width: 100%"
        >
          <el-table-column label="序号" prop="guarantee_apply_id"> </el-table-column>
          <el-table-column label="保函编号" prop="guarantee_apply_number"> </el-table-column>
          <el-table-column label="保函类型" prop="gtype"> </el-table-column>
              <el-table-column label="项目名称" prop="bidding_name"> </el-table-column>
          <el-table-column label="保证金额（万元）" prop="margin_amount">
          </el-table-column>
          <el-table-column label="申请公司名称" prop="apply_company_name"> </el-table-column>
          <el-table-column label="承保公司名称" prop="guarantee_company_name"> </el-table-column>
      
          <!-- <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleUpdate">编辑</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column> -->
          <el-table-column align="right">
            <template slot="header">
              <el-input
                v-model="search"
                size="mini"
                placeholder="输入关键字搜索"
                style="margin-bottom: 30px"
              />
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="修改密码">
        <ul class="password">
          <li>
            <span>原密码: </span>
            <input v-model="modifylist.old_password" type="text" />
          </li>
          <li>
            <span>新密码: </span>
            <input v-model="modifylist.password" type="text" />
          </li>
          <li><span>确认新密码:</span>&nbsp;<input type="text" /></li>
          <li><button @click="modifys">确认修改</button></li>
        </ul>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import {
  zizhi,
  yeji,
  seal,
  corporate,
  modify,
  grzx,
  out,
  gongsirenzheng
} from "@/api/personal";
export default {
  data() {
    return {
      //企业资质
      zizhilist: [],
      grzx: [],
      outlist: [],
      modifylist: {
        password: "",
        old_password: "",
        id: "",
        user_id:"",
      },
      geren:{

      },
      corporatelist: [],
      seallist: [],
      yejilist: [],
      tabPosition: "left",
      search: "",
      formData: {
        field126: undefined,
        field127: undefined,
        field128: undefined,
        field129: undefined,
        field130: undefined,
        field131: undefined,
        field132: null,
        field133: null,
        field134: undefined,
        field135: null,
        field136: null,
        field138: undefined,
        field137: undefined,
      },
      field132Action: "https://jsonplaceholder.typicode.com/posts/",
      field132fileList: [],
      field133Action: "https://jsonplaceholder.typicode.com/posts/",
      field133fileList: [],
      field135Action: "https://jsonplaceholder.typicode.com/posts/",
      field135fileList: [],
      field136Action: "https://jsonplaceholder.typicode.com/posts/",
      field136fileList: [],
    };
  },
  created() { 
    this.grzxs();
    // this.zizhis();
    this.yejis();
    this.seals();
    this.corporates();
    // this.modifys();
    this.gongsirenzheng()
   
  },
  methods: {
//公司认证信息
    gongsirenzheng(){
 gongsirenzheng().then((response) => {
        console.log("公司认证信息",response);
        this.formData = response.data.info;
      });
    },
        //个人中心
    grzxs() {
 
      //  this.user_id=sessionStorage.getItem('id')
   console.log("feng")
      grzx(this.user_id).then((response) => {
        console.log(response);
        this.geren = response.data.detail;
      });
    },
    //退出登录
    outs() {
      out(this.outlist).then((response) => {
        console.log(response);
        this.outlist = response.data.data;
		sessionStorage.removeItem("token")
		this.$router.go(0)
      });
    },
    //修改密码
    modifys() {
      this.modifylist.id=sessionStorage.getItem('id')
            // this.modifylist.user_id=sessionStorage.getItem('id')
      modify(this.modifylist).then((response) => {
        console.log(response);
		if(response.data.code!=1){
			this.$message.error(response.data.msg)
		}else{
			this.$message.success('修改成功')
		}
      });
    },
    //法人章使用记录this.user_id
    corporates() {
      corporate().then((response) => {
        console.log("法人章使用记录",response);
        this.corporatelist = response.data.rows;
      });
    },
    //公章使用记录this.user_id
    seals() {
      seal().then((response) => {
        console.log("公章使用记录",response);
        this.seallist = response.data.rows;
      });
    },
    //资质
    zizhis() {
      zizhi(this.zizhilist).then((response) => {
        console.log(response);
        this.zizhilist = response.data.data.rows;
      });
    },
    //业绩
    yejis() {
      // var user_id=sessionStorage.getItem('id')
      yeji().then((response) => {
        console.log(response);
        this.yejilist = response.data.rows;
      });
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    field132BeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 2;
      if (!isRightSize) {
        this.$message.error("文件大小超过 2MB");
      }
      return isRightSize;
    },
    field133BeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 2;
      if (!isRightSize) {
        this.$message.error("文件大小超过 2MB");
      }
      return isRightSize;
    },
    field135BeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 2;
      if (!isRightSize) {
        this.$message.error("文件大小超过 2MB");
      }
      return isRightSize;
    },
    field136BeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 2;
      if (!isRightSize) {
        this.$message.error("文件大小超过 2MB");
      }
      return isRightSize;
    },
  },
};
</script>
<style scoped lang="scss">
ul,
li {
  list-style: none;
}

.header {
  position: relative;
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 60px;
  line-height: 60px;
  margin-bottom: 10px;
}

.header .header-left {
  position: absolute;
  left: 20px;
  top: -20px;
}

.header .header-right {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}

.header .header-right .img1 {
  position: absolute;
  right: 130px;
  top: 15px;
  width: 20px;
  text-align: center;
  height: 20px;
}

.header .header-right .img2 {
  position: absolute;
  right: 70px;
  top: 13px;
  width: 20px;
  height: 20px;
  border: none;
}

.header .header-right .img2 .img3 {
  position: absolute;
  left: 10px;
  bottom: 2px;
  width: 20px;
  height: 20px;
}

.Personal input {
  width: 300px;
  border: 0;
  border-bottom: #ccc 1px solid;
}

.Personal,
.password {
  margin-left: 200px;
  width: 1100px;
  height: 800px;
}

.password li span {
  display: inline-block;
  width: 130px;
  height: 20px;
}

.password li {
  margin-bottom: 40px;
}

.password li input {
  width: 250px;
}

.password li:nth-of-type(4) {
  margin-left: 110px;
  margin-top: 50px;
}

.password li:nth-of-type(4) button {
  background-color: #1795ff;
  width: 200px;
  height: 40px;
  border: none;
}
</style>
